<template>
  <div class="login">
    <div class="d1">
    <h2>后台管理系统登录界面</h2>

    <el-form :model="user" label-position="left" >

        <el-form-item class="i1">
        <el-icon :size="30"><User /></el-icon>
        <el-input placeholder="请输入账号" v-model="user.username" ></el-input>
        </el-form-item>

        <el-form-item class="i1">
        <el-icon :size="30"><Key /></el-icon>
        <el-input show-password placeholder="请输入密码" v-model="user.pwd" ></el-input>
        </el-form-item>

        <el-form-item>
            <el-checkbox v-model="user.isAgreen"/>已阅读并同意服务条款
        </el-form-item>

        <el-form-item >
            <el-button type="primary" @click="login">提交</el-button>
        </el-form-item>

    </el-form>

    
   </div> 
  </div>
</template>

<script setup>
import data from "@/assets/data";
import router from "@/router";
import { reactive, ref } from "vue";
import { User,Key } from '@element-plus/icons-vue'


const user = reactive({
    username : '',
    pwd : '',
})
let username  = ref('')
let pwd = ref('')

const Usercom = data.LoginUser;
console.log(Usercom);

const login = ()=>{
    Usercom.forEach(item => {
         if ( username.value == item.email  || username.value == item.username && pwd.value === item.loginpwd ) {
        sessionStorage.setItem('isLogin',item.username);
        router.push('/home')
    }else{
        console.log('no');
        
        // username.value = '';
        // pwd.value = '';
        // return false;
    }
    });
   
}

</script>

<style scoped>
.login{
    width: 100%;
    height: 100%;
    background-color: rgb(53, 53, 53);
    position: relative;
}
.d1{
  width: 30%;
  height: 250px;
  background-color: white;
  padding: 30px 30px;
  position: absolute;
  left: 35%;
  top: 25%;
  border-radius: 8px;
  box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.8);
}
.d1 h2{
    color: darkcyan;
    text-align: center;
    line-height: 45px;
}
.i1{
    background-color: red;
    display: flex;
}
.el-form-item__content {
    display: flex;
    flex-wrap: nowrap;
}
</style>